<!--
 * @Author: jixuanyu
 * @Date: 2022-02-24 09:55:21
 * @LastEditors: jixuanyu
 * @Description: file content
-->
<template>
  <a-switch
    v-model:checked="check"
    :autofocus="autofocus"
    :checked-children="checkedChildren"
    :checked-value="checkedValue"
    :disabled="disabled"
    :loading="loading"
    :size="size"
    :un-checked-children="unCheckedChildren"
    :un-checked-value="unCheckedValue"
  >
    <slot />
    <template v-if="$slots.checkedChildren" #checkedChildren>
      <slot name="checkedChildren" />
    </template>
    <template v-if="$slots.unCheckedChildren" #unCheckedChildren>
      <slot name="unCheckedChildren" />
    </template>
  </a-switch>
</template>
<script>
import { defineComponent, computed } from 'vue'
import { Switch } from 'ant-design-vue'
export default defineComponent({
  name: 'ZSwitch',
  components: {
    ASwitch: Switch
  },
  props: {
    checked: {
      type: [Boolean, String, Number],
      default: false
    },
    autofocus: {
      type: Boolean,
      default: false
    },
    checkedChildren: {
      type: String,
      default: undefined
    },
    checkedValue: {
      type: [Boolean, String, Number],
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'default'
    },
    unCheckedChildren: {
      type: String,
      default: undefined
    },
    unCheckedValue: {
      type: [Boolean, String, Number],
      default: false
    }
  },
  setup(props, _ref) {
    const check = computed({
      get() {
        return props.checked
      },
      set(val) {
        _ref.emit('update:checked', val)
      }
    })
    return { check }
  }
})
</script>
